import React from 'react'
// ===================================================================== 
const {  $Lazy } = window
// ===================================================================== Lazy
const BtnGroup = $Lazy.load(()=>import('#tp/btn-group'))
// =====================================================================
const Index = ({ title, children, prefix, suffix, noPadding, style, controls, className, suffixClassName, onDoubleClick }) => (
	<header className={`h40 bcf bbor1 fxmj ${noPadding?'':'xplr'} ${className||''}`} style={style}>
		<h2 className='fxm nowrap'>
			<i className='bcm r10px mr5 rel' style={{width:4,height:12}}></i>
			<b onDoubleClick={onDoubleClick} className={`nosel ${onDoubleClick?'cp':''}`} onClick={e=>e.stopPropagation()}>{title}</b>
			{ prefix && prefix}
		</h2>
		<div className={`fxm ml10 oh ${suffixClassName||''}`}> 
			{children}
			{
				controls && (
					<div className='group-btn'>
						<BtnGroup controls={controls} />
					</div>
				)
			}
			{ suffix }
		</div>
	</header>
)
export default Index